<template>
  <div class="detail bg-w">
    <div class="title fs-20 b pd-b20">
      {{ data.name }}
    </div>
    <video class="video"
      :src="data.video_url">
    </video>
    <div class="mg-t30 p-r desc pd-f30 fs-18 b"
      v-show="data.abstract">
      <img :src="img.kt"
        alt=""
        class="k">
      <div class="k-c"
        :style="{backgroundImage:'url('+img.kc+')'}"></div>
      <img :src="img.kb"
        alt=""
        class="k k-b">
      {{ data.abstract }}
    </div>
    <div v-html="data.content"
      v-show="data.content"
      class="pd-tb30 content">
    </div>
    <img class="qr-img"
      :src="data.logo_text"
      alt="">
  </div>
</template>

<script>
import { getArtDetail } from '../../api/common'
export default {
  props: {

  },
  components: {

  },
  onLoad(argData) {

  },
  onShow() {

  },
  onReady() {

  },
  onUnload() {

  },
  async onPullDownRefresh() {
    // console.log('下拉')
    uni.stopPullDownRefresh()
  },
  async onReachBottom() {
    // console.log('上拉')
  },
  computed: {

  },
  data() {
    return {
      data: {
      },
      img: {
        kt: require('@/assets/img/k-t.png'),
        kc: require('@/assets/img/k-c.png'),
        kb: require('@/assets/img/k-b.png'),
      }
    }
  },
  methods: {
    async getData() {
      let data = {
        theme_article_id: this.Params.id
      }
      let res = await getArtDetail(data)
      this.data = res
    },
    init() {
      this.getData()
    }
  },
}
</script>

<style lang="scss">
.detail {
  padding: 30px 20px;
  .title {
    border-bottom: 1px solid #cbcbcb;
  }
  .video {
    margin-top: 25px;
    width: 336px;
    height: 195px;
    background: rgba(236, 236, 236, 1);
    border-radius: 5px;
  }
  .k {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 26.06px;
  }
  .k-b {
    top: auto;
    bottom: 0;
  }
  .k-c {
    position: absolute;
    top: 26.06px;
    bottom: 26.06px;
    left: 0px;
    right: 0;
    width: 100%;
    background-repeat: repeat-y;
    background-size: 100%;
  }
  .content {
    color: #1e1e1e;
    font-size: 18px;
  }
  .qr-img {
    display: block;
    width: 100%;
    margin: 20px auto;
  }
}
</style>
